<template>
    <div class="container">
        <div style="padding-top: 20px;">
            <el-breadcrumb separator="/" class="breadcrumb">
                <el-breadcrumb-item>
                    <router-link to="/user/location">党建地点</router-link>
                </el-breadcrumb-item>
                <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card class="main-card">
            <div class="content">
                <div class="location-detail">
                    <el-card class="image-card">
                        <img
                            v-if="locationDetails.photo"
                            :src="locationDetails.photo"
                            alt="Location Image"
                            class="location-image"
                        />
                    </el-card>

                    <div class="location-info">
                        <h2>{{ locationDetails.name }}</h2>
                        <p><strong>预约人数:</strong> {{ locationDetails.balance }}</p>
                        <p><strong>类型:</strong> {{ locationDetails.type }}</p>
                    </div>

                    <el-button type="primary" @click="openBookingDialog">预约</el-button>

                    <div class="location-description">
                        <h3>详细信息</h3>
                        <p class="description-text">{{ locationDetails.content }}</p>
                    </div>
                </div>

                <div class="recommendations">
                    <h3>系统推荐</h3>
                    <el-row :gutter="20" class="recommendation-list">
                        <el-col
                            v-for="location in recommendedLocations"
                            :key="location.id"
                            :span="24"
                            class="recommendation-item"
                        >
                            <div
                                class="recommended-content"
                                @click="navigateToLocation(location.id, location.name)"
                            >
                                <img
                                    :src="location.photo"
                                    alt="推荐地点"
                                    class="recommendation-image"
                                />
                                <div class="recommendation-name">{{ location.name }}</div>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-card>

        <el-dialog :visible.sync="bookingDialogVisible" title="预约" @close="resetForm">
            <el-form :model="bookingForm" ref="bookingForm">
                <el-form-item label="预约人数" prop="number" :rules="[{ required: true, message: '请输入预约人数', trigger: 'blur' }]">
                    <el-input v-model="bookingForm.number" type="number"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" prop="contact" :rules="[{ required: true, message: '请输入联系方式', trigger: 'blur' }]">
                    <el-input v-model="bookingForm.contact"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitBooking">提交预约</el-button>
                    <el-button @click="bookingDialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { selectByNameService, LocationListService } from '@/api/location.js';

export default {
    data() {
        return {
            locationId: this.$route.params.locationId,
            locationName: this.$route.params.locationName,
            locationDetails: {},
            allLocations: [],
            recommendedLocations: [],
            bookingDialogVisible: false,
            bookingForm: {
                number: '',
                contact: '',
            },
        };
    },
    created() {
        this.fetchLocationDetails();
        this.fetchAllLocations();
    },
    methods: {
        openBookingDialog() {
            console.log('预约按钮被点击'); // 检查控制台输出
            this.bookingDialogVisible = true;
        },
        async submitBooking() {
            // 提交预约的逻辑
        },
        resetForm() {
            this.bookingForm.number = '';
            this.bookingForm.contact = '';
        },
    },
};
</script>
